/* 文字居中 */
.t-a-c {
  text-align: center;
}

/* 文字右对齐 */
.t-a-r {
  text-align: right;
}

$color:#333333 #666666 #999999 #fff #327bfa #2F95F0;
$colors-name: 333, 666, 999, fff, 327bafa, 2F95F0;
@each $name in $colors-name {
  $i: index($colors-name, $name);
  .c-#{$name} {
    color: nth($color, $i);
  }
}

/* 白色背景 */
.bg-white{background: nth($color, 4)}
.fl {float: left;}
.fr {float: right;}
.m-a{margin:0 auto}
.display-ib{display: inline-block;}
.display-b{display: block;}

@for $i from 1 through 40 {
  .m-t#{$i} {
    margin-top: 1px * $i;
  }
  .m-r#{$i} {
    margin-right: 1px * $i;
  }
  .m-b#{$i} {
    margin-bottom: 1px * $i;
  }
  .m-l#{$i} {
    margin-left: 1px * $i;
  }

  .p-t#{$i} {
    padding-top: 1px * $i;
  }
  .p-r#{$i} {
    padding-right: 1px * $i;
  }
  .p-b#{$i} {
    padding-bottom: 1px * $i;
  }
  .p-l#{$i} {
    padding-left: 1px * $i;
  }

  .rem-m-t#{$i} {
    margin-top: torem($i);
  }
  .rem-m-r#{$i} {
    margin-right: torem($i);
  }
  .rem-m-b#{$i} {
    margin-bottom: torem($i);
  }
  .rem-m-l#{$i} {
    margin-left: torem($i);
  }

  .rem-p-t#{$i} {
    padding-top: torem($i);
  }
  .rem-p-r#{$i} {
    padding-right: torem($i);
  }
  .rem-p-b#{$i} {
    padding-bottom: torem($i);
  }
  .rem-p-l#{$i} {
    padding-left: torem($i);
  }
  .rem-f-z#{$i} {
    font-size: torem(1 * $i);
  }
  .rem-wh#{$i} {
    width: torem($i);
  }
  .rem-ht#{$i} {
    height: torem($i);
  }
}

/* font-size */
@for $i from 10 through 45 {
  .f-z#{$i} {
    font-size: 1px * $i;
  }
}

.clearfix {
  zoom: 1;
  &:after {
    content: '';
    display: block;
    clear: both;
  }
}

.fl{
  float: left;
}
.fr{
  float: right;
}
